<template>
    <div class="item">
        {{title}}
    </div>
</template>

<script>
    export default {
        name: "taskbar-item",
        props: {
            title: String,
        },
        components: {},
        data() {
            return {}
        },
        methods: {},
        mounted() {

        }
    }
</script>

<style scoped>
    .item {
        display: flex;
        width: 100px;
        /*align-items: center;*/
        /*justify-content: center;*/
        /* height: calc(100% - 3px); */
        height: 100%;
        /* border-bottom: 3px solid #0078d7; */
        margin-right: 5px;
        position: relative;
        user-select: none;
    }

    .item::after {
        content: "";
        height: 3px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #0078d7;
    }

    .item:hover {
        background-color: #fff;
    }
</style>
